<template>
    <addStudentPaymentView ref="addStudentPaymentView" />
    <editStudentPayType ref="editStudentPayType" />
    <addChargeTask ref="addChargeTask" @refreshHandle="refreshHandle" />
 
    <div class="app-table">
        <div class="container">
            <div class="top_box">
                <div class="imgBox">
                    <img class="bannerImg" src="../../assets/ChargeTask_banner.png" alt="" @click="popupFalg = true">
                </div>

                <div class="tag_box">
                    <div class="tag flex" v-for="(item, index) in paymentTypeData">
                        <div class="flex">
                            <img :src="imgData[index % 5]" alt="">
                            <p>{{ item.name }}</p>
                        </div>
                        <el-popover placement="bottom" :width="100">
                            <template #reference>
                                <el-icon class="icon">
                                    <MoreFilled />
                                </el-icon>
                            </template>
                            <div class="labelBtn">
                                <p @click="editPayTypeHandle(item.id)">编辑</p>
                                <span></span>
                                <p @click="delHandle(item.id)">删除</p>
                            </div>
                        </el-popover>
                    </div>
                    <div class="tag flex" @click="addPayTypeHandle">
                        <div class="flex">
                            <img src="../../assets/ChargeTaskLabel_icon6.png" alt="">
                            <p>添加项目</p>
                        </div>
                    </div>

                </div>
            </div>

            <div class="header flex">
                <div class="nav_box flex">
                    <div class="nav" @click="active = 0, currentView = 'ChargeTaskListView'">
                        <p :class="{ 'pNav': active !== 0, 'pNav_actvie': active === 0 }">收费任务</p>
                        <div :class="{ 'xian': active !== 0, 'xian_active': active === 0 }"></div>
                    </div>
                    <!-- <div class="nav" @click="active = 1">
                        <p :class="{ 'pNav': active !== 1, 'pNav_actvie': active === 1 }">减免核对</p>
                        <div :class="{ 'xian': active !== 1, 'xian_active': active === 1 }"></div>
                    </div>
                    <div class="nav" @click="active = 2">
                        <p :class="{ 'pNav': active !== 2, 'pNav_actvie': active === 2 }">减免日志</p>
                        <div :class="{ 'xian': active !== 2, 'xian_active': active === 2 }"></div>
                    </div> -->
                    <div class="nav" @click="active = 3, currentView = 'paymentQueryView'">
                        <p :class="{ 'pNav': active !== 3, 'pNav_actvie': active === 3 }">综合查询</p>
                        <div :class="{ 'xian': active !== 3, 'xian_active': active === 3 }"></div>
                    </div>
                </div>

                <div class="controlBox flex">
                    <!-- <div class="control flex">
                        <img src="../../assets/excel.png" alt="">
                        <p>对比</p>
                    </div> -->
                    <div class="control flex" @click="addPayment">
                        <img src="../../assets/refundExport_icon.png" alt="">
                        <p>创建缴费任务</p>
                    </div>
                </div>
            </div>

            <div class="transitionBox">
                <Transition name="fade">
                    <component :is="currentView" :key="currentView" :ref="currentView"></component>
                </Transition>
            </div>
        </div>
    </div>
</template>
<script>
// import editRefundListView from "@/components/payment/editRefundListView.vue";
import { ElConfigProvider, ElMessageBox, ElMessage } from "element-plus";
import ChargeTaskListView from "@/components/payment/ChargeTaskListView.vue";
import paymentQueryView from "@/components/payment/paymentQueryView.vue";
import { httpService } from "@/utils/httpService";
import { MoreFilled } from "@element-plus/icons-vue";
import addStudentPaymentView from "@/components/payment/addStudentPaymentView.vue";
import myPopupView from "@/components/commonModule/myPopupView.vue";
import editStudentPayType from "@/components/payment/editStudentPayType.vue";
import addChargeTask from "@/components/payment/addChargeTask.vue";
// import VueSmoothScroll from "vue2-smooth-scroll";

export default {
    components: {
        ChargeTaskListView, MoreFilled, paymentQueryView, addStudentPaymentView, myPopupView,
        editStudentPayType, addChargeTask,
    },
    data() {
        return {
            active: 0,
            currentView: "ChargeTaskListView",
            popupFalg: false,
            paymentTypeData: [],
            imgData: [
                require('@/assets/ChargeTaskLabel_icon1.png'),
                require('@/assets/ChargeTaskLabel_icon2.png'),
                require('@/assets/ChargeTaskLabel_icon3.png'),
                require('@/assets/ChargeTaskLabel_icon4.png'),
                require('@/assets/ChargeTaskLabel_icon5.png'),
            ],
        };
    },
    mounted() {
        this.getPaymentTypeList()
    },
    methods: {
        editPayTypeHandle(id) {
            this.$refs.editStudentPayType.popupFlag = true
            this.$refs.editStudentPayType.title = "修改标签"
            this.$refs.editStudentPayType.getDetail(id)
        },
        addPayTypeHandle() {
            this.$refs.editStudentPayType.popupFlag = true
            this.$refs.editStudentPayType.title = "添加标签"
        },

        getPaymentTypeList() {
            httpService(
                "/javaApi/paymentType/list/1/10",
                {},
                "get"
            ).then((data) => {
                this.paymentTypeData = data.list.sort((a, b) => b.sortNum - a.sortNum);
            });
        },

        delHandle(id) {
            ElMessageBox.confirm("确定要删除本条记录吗？", "提醒", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    httpService(
                        "/javaApi/paymentType/deleteById", "id=" + id, "post"
                    ).then((data) => {
                        if (data.code == 200) {
                            ElMessage.success("删除成功");
                            this.getPaymentTypeList();
                        } else {
                            ElMessage.error("删除失败，请重试！");
                        }
                    });
                })
                .catch(() => {
                });
        },

        Download() {
            httpService(
                "/javaApi/paymentRefund/exportPaymentRefund",
                {},
                "get"
            ).then((data) => {
                window.open("https://wx.zhengzhong.cn" + data.message, "_blank")
            });
        },

        addPayment(data) {
            this.$refs.addChargeTask.title = '创建缴费任务';
            this.$refs.addChargeTask.popupFlag = true;
            this.$refs.addChargeTask.getpaymentTypeList()
            this.$refs.addChargeTask.getdateName()
        },

        refreshHandle() {
            this.$refs.ChargeTaskListView.getStudentPayList()
        },
    },
}
</script>
<style scoped>
* {
    margin: 0;
    padding: 0;
}

/* ::-webkit-scrollbar{
    display: none !important;
    width: 0 !important;
} */


.flex {
    display: flex;
    align-items: center;
}

.app-table {
    background: #eff3f5;
    padding: 5px 10px 0px;
}

.container {
    background: white;
    padding: 20px 0px 10px 20px;
    margin-bottom: 10px;
    min-height: calc(100vh - 145px);
    overflow: auto;
}

.title {
    font-size: 18px;
    color: #000;
    font-weight: 600;
}

.header {
    border-bottom: 1px solid #D8D9DB;
    justify-content: space-between;
    margin-right: 20px;

}

.nav {
    margin-right: 40px;
    cursor: pointer;
}

.pNav {
    color: #333333;
    font-size: 15px;
    font-weight: bold;
    white-space: nowrap;
}

.pNav_actvie {
    color: #076AF0;
    font-size: 15px;
    font-weight: bold;
    white-space: nowrap;
}

.xian {
    height: 3px;
    border-radius: 3px 3px 0 0;
    background-color: transparent;
    margin-top: 9px;
}

.xian_active {
    height: 3px;
    border-radius: 3px 3px 0 0;
    background-color: #076AF0;
    margin-top: 9px;
}

.controlBox {
    padding-bottom: 12px;
}

.controlBox img {
    width: 15px;
    margin-right: 5px;
}

.control {
    margin-left: 30px;
    color: #666E79;
    font-size: 15px;
    cursor: pointer;
    white-space: nowrap;
}

.top_box {
    margin-bottom: 20px;
    display: flex;
}

.imgBox {
    width: 30%;
    min-width: 380px;
    height: 156px;
    border-radius: 10px;
    /* box-shadow: 20px 20px 25px rgba(12, 66, 120, 0.07), -20px -20px 25px rgba(12, 66, 120, 0.07); */
    /* background-color: rgba(12, 66, 120, 0.11); */
}

.imgBox img {
    width: 100%;
    height: 156px;
    border-radius: 10px;
}

.bannerImg {}

.tag_box {
    width: 100%;
    margin-left: 20px;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
}

.tag {
    width: calc((100% - 50px) / 6);
    min-width: 170px;
    color: #333;
    font-size: 18px;
    background-color: #fff;
    padding: 10px 15px;
    border-radius: 10px;
    box-shadow: 20px 20px 25px rgba(12, 66, 120, 0.07), -20px -20px 25px rgba(12, 66, 120, 0.07);
    white-space: nowrap;
    justify-content: space-between;
    margin-right: 20px;
    margin-bottom: 20px;
    cursor: pointer;
}

/* .tag:nth-child(5n) {
    margin-right: 0 !important;
} */

.tag img {
    width: 45px;
    height: 45px;
    margin-right: 20px;
}

.tag .icon {
    transform: rotateZ(90deg);
}

/* .transitionBox {
    transform: scale(1);
    transition: all 0.3s;
}

.transitionBox1 {
    transform: scale(0);
    transition: all 0.3s;
} */
.transitionBox {
    margin-right: 20px;
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}


.labelBtn {
    display: flex;
    align-items: center;
    justify-content: center;
}

.labelBtn p {
    font-size: 14px;
    color: #333;
    cursor: pointer;
}

.labelBtn p:hover {
    color: #0065FF;
}

.labelBtn span {
    width: 1px;
    height: 10px;
    background-color: #8E8E8E;
    margin: 0 15px;
}
</style>